<template>
  <div class="post-film-info">
    <div class="about-more-container">
      <div class="about-mb" @click="$emit('isShow',false)">
        <span></span>
        <i>BACK</i>
      </div>
    </div>
    <div class="about-post-film-list-container">
      <div class="about-post-film-list">
        <div class="about-post-film-item">
          <div class="about-post-film-title">
            <span>编辑</span>
          </div>
          <div class="about-post-film-detail-list">
            <div class="about-post-film-detail-item">
              <ul>
                <li>前期现场跟组DIT</li>
                <li>前期现场跟组剪辑</li>
              </ul>
            </div>
            <div class="about-post-film-detail-item">
              <ul>
                <li>后期剪辑机房</li>
                <li>后期剪辑助理</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="about-post-film-item">
          <div class="about-post-film-title">
            <span>DI</span>
          </div>
          <div class="about-post-film-sub-title">
            <span>数字中间片全流程制作</span>
          </div>
          <div class="about-post-film-detail-list">
            <div class="about-post-film-detail-item">
              <ul>
                <li>2K2D/2K3D实时调色</li>
                <li>4K2D/4K3D实时调色</li>
                <li>数字中间片数据管理</li>
              </ul>
            </div>
            <div class="about-post-film-detail-item">
              <ul>
                <li>3D立体矫正</li>
                <li>3D对白字幕制作</li>
                <li>预告片调色</li>
              </ul>
            </div>
            <div class="about-post-film-detail-item">
              <ul>
                <li>DCP母版制作</li>
                <li>各类数字母版制作</li>
              </ul>
            </div>
          </div>

          <div class="about-post-film-sub-title">
            <span>标准影院放映</span>
          </div>
          <div class="about-post-film-detail-list">
            <div class="about-post-film-detail-item">
              <ul>
                <li>视效镜头审核</li>
              </ul>
            </div>
            <div class="about-post-film-detail-item">
              <ul>
                <li>2K/4K,2D/3D电影看片放映</li>
              </ul>
            </div>
          </div>
        </div>


        <div class="about-post-film-item">
          <div class="about-post-film-title">
            <span>声音</span>
          </div>
          <div class="about-post-film-detail-list">
            <div class="about-post-film-detail-item">
              <ul>
                <li>同期录音</li>
                <li>ADR对白录音及编辑</li>
                <li>Foley制作</li>
              </ul>
            </div>
            <div class="about-post-film-detail-item">
              <ul>
                <li>音响效果制作</li>
                <li>国际声带制作</li>
                <li>DTS·X全景声终混</li>
              </ul>
            </div>
            <div class="about-post-film-detail-item">
              <ul>
                <li>杜比全景声终混</li>
                <li>杜比全景声5.1终混</li>
                <li>杜比全景声家庭版7.1.4终混</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="sass">
.post-film-info
  position: absolute
  width: 690px
  top: 70px
  .about-more-container
    width: 100%
    position: absolute
    top: 30px
    .about-mb
      position: relative
      display: inline-block
      width: 44px
      height: 44px
      cursor: pointer
      left: 50%
      top: -50px
      margin-left: -22px

      &:before
        content: ""
        display: block
        position: absolute
        width: 44px
        height: 22px
        border: 1px solid #fff
        border-bottom-width: 0
        border-radius: 22px 22px 0 0
        box-sizing: border-box
      span
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0
        width: 100%
        height: 100%
        transition: 0.3s
        background: rgba(0, 0, 0, .8)
        border-radius: 50%
        &::before
          content: ""
          display: block
          position: absolute
          top: 50%
          left: 50%
          width: 1px
          height: 22px
          background: #fff
          transform: translateY(-50%) rotate(90deg)
        &::after
          content: ""
          display: block
          position: absolute
          top: 50%
          left: 50%
          width: 1px
          height: 22px
          background: #fff
          transform: translateY(-50%)
      i
        position: absolute
        left: 0
        top: 80%
        width: 100%
        height: 44px
        font-style: normal
        text-align: center
  .about-post-film-list-container
    width: 100%
    padding: 5% 0 5% 5%
    background: rgba(0, 0, 0, .8)
    .about-post-film-list
      .about-post-film-item
        padding: 25px 0 24px
        padding-left: 1px
        span
          border-bottom: 1px solid #dadada
          font-size: 15px
      .about-post-film-detail-list
        padding-bottom: 21px
        display: flex
        .about-post-film-detail-item
          width: 33%
          ul
            li
              position: relative
              padding-left: 8px
              &::before
                content:""
                display: block
                position: absolute
                top: 10px
                left: 1px
                width: 3px
                height: 3px
                background: #fff
                border-radius: 50%

</style>
